<template>
  <div>
      <!-- 推荐歌单列表 -->
       <div class="list-item" >
           <div class="left">
                <h3>{{option.name}}</h3>
                <p>
                    <span class="author">
                        {{option.ar[0].name}}
                    </span>
                </p>
            </div>
            <div class="right">
               
            </div>
        </div>
  </div>
</template>

<script>
export default {
    //searchmusic父子组件传参
    props:['option'],
    data(){
        return {

        }
    },
    
   
}
</script>

<style lang="less" scoped>

.list-item {
    height:56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 15px;
    border-bottom:1px solid #ccc;
    .left {
        line-height: 1.5;
        h3 {
            font-weight: normal;
            font-size:16px;
            color:#000;
            text-align: left;
        }
        p {
            text-align:left;
            font-size:14px;
            color:#666;
            line-height:1.5;
            height:20px;
            box-shadow: border-box;
            // 让溢出文本隐藏省略号显示
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            .icon {
            // 图标
            display: inline-block;
            vertical-align: middle;
            width: (24px * (2/3));
            height: (16px * (2/3));
            // background-image: url('../assets/images/sprites.png');
            background-position: 0 0 ;
            background-size: (332px  * (2/3)) (194px * (2/3));
        }
        }
    }
    .right {
        height:56px;
        button {
            background-color: transparent;
            color:#DB9A9D;
            border:2px solid transparent;
            font-size:25px;
            font-weight: normal;
            width:30px;
            height:30px;
            margin-top:((56px - 30) / 2);
            box-sizing: border-box;
            text-align:center;
            border-radius:50%;

        }
    }
        
}
</style>